import RoomItem from "@/components/room-item"
import { changeDetailInfoAction } from "@/store/modules/detail"
import { fetchRoomListAction } from "@/store/modules/entire/createActions"

import React, { memo, useCallback, useEffect } from "react"
import { useDispatch, useSelector } from "react-redux"
import { useNavigate } from "react-router-dom"
import { RoomsWrapper } from "./style"

const EntireRooms = memo((props) => {
  const dispatch = useDispatch()
  // 网络请求相关的操作
  useEffect(() => {
    dispatch(fetchRoomListAction())
  }, [dispatch])

  const { roomList, pageTotal, isLoading } = useSelector((state) => ({
    roomList: state.entire.roomList,
    pageTotal: state.entire.pageTotal,
    isLoading: state.entire.isLoading,
  }))

  // 跳转到 detail 详情页
  const navigate = useNavigate()
  const itemClick = useCallback(
    (itemData) => {
      navigate("/detail")
      dispatch(changeDetailInfoAction(itemData))
    },
    [navigate, dispatch]
  )

  return (
    <RoomsWrapper>
      <div className="roomlist-title">
        {!!pageTotal && pageTotal + "多处住所"}
      </div>
      <div className="roomlist-content">
        {roomList?.map((item) => {
          return (
            <RoomItem
              itemData={item}
              itemWidth="20%"
              key={item._id}
              itemClick={itemClick}
            />
          )
        })}
      </div>
      {isLoading && <div className="cover-back"></div>}
    </RoomsWrapper>
  )
})


export default EntireRooms
